import React, { useRef } from 'react';
import { Button } from 'antd'

//导入Editor组件
import { Editor } from '@tinymce/tinymce-react';

interface Props {

}


function Tt(props: Props) {
    
    let editorRef:any = null;

    const log = () => {
        if (editorRef) {
            //通过Editor组件实例, 获取Editor组件的内容
            console.log(editorRef.getContent());
        }
    };

    return (
        <div className='myeditor'>

            <Editor
                //apikey需要获取
                apiKey='your-api-key'
                //保存Editor组件的实例
                onInit={(evt, editor) => editorRef = editor}
                initialValue="<p>This is the initial content of the editor.</p>"
                init={{
                height: 500,
                menubar: false,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                ],
                toolbar: 'undo redo | blocks | ' +
                    'bold italic forecolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | help',
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                }}
            />
            <div className="box">
                <Button onClick={()=>{ log() }} type='primary' style={{textAlign:'center',padding:'0',paddingRight:'20px',marginTop:'20px'}}>保存</Button>
            </div>
        </div>
    );


}

export default Tt;